window.onload = function () {
    let jianjie = document.querySelector('.jianjie');
    let look = document.querySelector('.look');
    let tag = document.querySelector('.tag');
    let shijian = document.querySelector('.shijian');
    let kaifa = document.querySelector('.kaifa');
    let faxing = document.querySelector('.faxing');
    let list = document.querySelector('.list');


    let res = pAjax({
        url:'../data/jk/jujijingying.json'
    })
    res.then(function (res) {
        res = JSON.parse(res);


        let about = res.result.about_the_game;
        render(about);

        let genres = res.result.genres;
        render2(genres);

        let publishers = res.result.publishers[0].value;
        render4(publishers);
        render5(publishers);

        let day = res.result.release_date;
        render3(day);

        let ph = res.result.screenshots.slice(0, 8);
        render6(ph);
        localStorage.setItem('ooo', JSON.stringify(ph));
    })



    function render(data) {
        jianjie.innerHTML =` ${data}`;
    }

    function render2(data) {
        let str = '';
        data.forEach(function (item) {
            str += `
                    <span>${item}</span>
                    `;
        })
            tag.innerHTML=str
        
    }

    function render3(data) {
        let str = '';
            str = `
                    <p class="shijian">
                        <span class="lable">发行时间：</span>
                        <span class="value">${data}</span>
                    </p>
                    
                    `;
        kaifa.innerHTML = str;
    }
    function render4(data) {
        let str = '';
            str = `
                    <p class="kaifa">
                        <span class="lable">开发商：</span>
                        <span class="value">${data}</span>
                    </p>
                    
                    `;
        faxing.innerHTML = str;
    }
    function render5(data) {
        let str = '';
            str = `
                    <p class="faxing">
                        <span class="lable">发行商：</span>
                        <span class="value">${data}</span>
                    </p>
                    
                    `;
        shijian.innerHTML = str;
    }

    function render6(data) {
        let str = '';
        data.forEach(function (item) {
            
            str += `
                    <div class="preview">
                        <img class="iv" idx="${item.type}" src=${item.thumbnail} alt="">
                    </div>
                    `;
            
        });
        //getattribute
        list.innerHTML = str;
    }



    let flag = true;
    look.onclick = function () {
        if (flag == true) {
            let jianjie = document.querySelector('.jianjie');
            jianjie.style.webkitLineClamp = '100';
            flag = false;
            return;
        }
        else {
            let jianjie = document.querySelector('.jianjie');
            jianjie.style.webkitLineClamp = '10';
            flag = true;
            return;
        }
        
        
    }
    

    list.onclick = function (e) {
        var e = e || window.event;
        let preview = document.querySelectorAll('.preview');
        if (e.target.classList.contains('iv')) {
            let vv = document.querySelector('.vv');
            let va = document.querySelector('.va');
            let iv = document.querySelector('.iv');
            if (e.target.getAttribute('idx') == 'movie') {
                va.style.display = 'none';
                vv.style.display = 'block';
                //获取索引值
                if ( e.target.nodeName.toLowerCase() != 'preview' || e.target.nodeName.toLowerCase() != 'list') {
                    var parentLi =e.target.parentElement;
                    var liIndex = Array.prototype.indexOf.call(parentLi.parentNode.children, parentLi);
                    
                }
                
                let ph2 = JSON.parse(localStorage.getItem('ooo'))[liIndex].url;
                vv.setAttribute('src', ph2);


                
            }
            if (e.target.getAttribute('idx') == 'image') {
                vv.style.display = 'none';
                va.style.display = 'block';
                if ( e.target.nodeName.toLowerCase() != 'preview' || e.target.nodeName.toLowerCase() != 'list') {
                    var parentLi =e.target.parentElement;
                    var liIndex = Array.prototype.indexOf.call(parentLi.parentNode.children, parentLi);
                    
                    let ph2 = JSON.parse(localStorage.getItem('ooo'))[liIndex].thumbnail;
                    

                    va.setAttribute('src', ph2);
                }
            }
        }
    }







    let con = document.querySelector('.con');
    
    let res1 = pAjax({
            url:'../data/jk/jujijingyingpinglun.json'
        })
        res1.then(function (res) {
            res = JSON.parse(res);
            console.log(res);
        
            let description = res.result.links;
            console.log(description);
            render7(description);
        
        
        })

    
    function render7(data) {
        let str = '';
        data.forEach(function (item) {
            str += `
                    <li>
                        <span class="review">${item.description}</span>
                        <span class="username">${item.user.username}</span>
                    </li>
                    `;
        });
        
        con.innerHTML = str;
    }
    

                
}